<template>
  <div>
    <el-tree
      ref="tree"
      :default-expanded-keys="expandedNodeId"
      :default-checked-keys="selectedNodeId"
      :highlight-current="true"
      @check-change="handleNodeClick"
      node-key="id"
      show-checkbox
      :load="loadNode"
      lazy
      :props="props"
    ></el-tree>
    <el-dropdown style="display: none" @command="handleCommand">
      <span class="el-dropdown-link">
        下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item command="a">黄金糕</el-dropdown-item>
        <el-dropdown-item command="b">狮子头</el-dropdown-item>
        <el-dropdown-item command="c">螺蛳粉</el-dropdown-item>
        <el-dropdown-item command="d" disabled>双皮奶</el-dropdown-item>
        <el-dropdown-item command="e" divided>蚵仔煎</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
    <div class="box"></div>
    <el-button @click="saveNode">保存</el-button>

    <el-row>
      <el-col :span="12">
        <el-transfer
          v-model="value"
          :data="data"
          :left-default-checked="[2, 3]"
          :right-default-checked="[1]"
          :button-texts="['左边', '右边']"
          :titles="['全部', '显示']"
          @change="changeEvent"
          @left-check-change="changeLeft"
          @right-check-change="changeRight"
        ></el-transfer>
        <el-button @click="saveEvent" style="float: right">保存</el-button>
      </el-col>

      <el-col :span="12">
        <tree-transfer
           ref="treeTransfer"
          :title="title"
          :from_data="fromData"
          :pid="parent_id"
          :to_data="toData"
          :defaultProps="{ label: 'name' }"
          @add-btn="add"
          @left-check-change="left"
          @remove-btn="remove"
          height="600px"
        >
        </tree-transfer>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import treeTransfer from "el-tree-transfer";
export default {
  components: { treeTransfer },
  data() {
    return {
      data: [
        {
          key: 1,
          label: "单选项值",
        },
        {
          key: 2,
          label: "双选项值",
        },
        {
          key: 3,
          label: "默认空选项值",
        },
        {
          key: 4,
          label: "全选选项值",
        },
      ],

      value: [1],
      treeData: [],
      parent_id: "parent_id",
      fromData: [
        {
          key: 1,
          parent_id: "1",
          name: "选项1",
          children: [
            {
              key: 11,
              parent_id: "2",
              name: "选项1-1",
            },
            {
              key: 12,
              parent_id: "3",
              name: "选项1-2",
            },
          ],
        },
        {
          key: 2,
          parent_id: "4",
          name: "选项2",
          children: [
            {
              key: 21,
              parent_id: "5",
              name: "选项2-1",
            },
            {
              key: 22,
              parent_id: "6",
              name: "选项2-2",
            },
          ],
        },
      ],
      toData: [
        {
          key: 3,
          name: "选项3",
          parent_id: "7",
          children: [
            {
              key: 31,
              parent_id: "8",
              name: "选项3-1",
            },
            {
              key: 32,
              parent_id: "9",
              name: "选项3-2",
            },
          ],
        },
        {
          key: 4,
          name: "选项4",
          parent_id: "10",
          children: [
            {
              key: 41,
              parent_id: "11",
              name: "选项4-1",
            },
            {
              key: 42,
              parent_id: "12",
              name: "选项4-2",
            },
          ],
        },
      ],
      title: ["左边全部", "右边展示"],
      selectedNodeId: [],
      props: {
        label: "name",
        children: "zones",
        isLeaf: "leaf",
        id: "id",
      },
      expandedNodeId: [],
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.scrollToSelectedNode();
    });
  },
  methods: {
    left() {
      console.log(12345);
    },
    add(fromData, toData, obj) {
      // 将左侧选中的数据添加到右侧
      toData.push(obj.nodes[0]);

      // 从左侧移除选中的数据
      obj.nodes.forEach((node) => {
        const index = fromData.findIndex((item) => item.key === node.key);
        if (index > -1) {
          fromData.splice(index, 1);
        }
      });
      const treeTransfer = this.$refs.treeTransfer;
      if (treeTransfer.isAllChecked()) {
        treeTransfer.toggleAllChecked();
      }
    },
    remove(fromData, toData, obj) {
      // 将右侧选中的数据添加到左侧
      fromData.push(obj.nodes[0]);

      // 从右侧移除选中的数据
      obj.nodes.forEach((node) => {
        const index = toData.findIndex((item) => item.key === node.key);
        if (index > -1) {
          toData.splice(index, 1);
        }
      });
    },
    changeEvent(value, direction, movedKeys) {
      console.log(value, direction, movedKeys, "event111");
    },
    changeLeft(e) {
      console.log(e, "event222");
    },
    changeRight(e) {
      console.log(e, "event333");
    },
    saveEvent() {},
    handleCommand(command) {
      console.log(command);
    },
    loadNode(node, resolve) {
      if (node.level === 0) {
        return resolve([{ name: "region", id: 0 }]);
      }
      // this.expandedNodeId.push(node.childNodes[0].data.id)
      if (node.level > 1) return resolve([]);

      setTimeout(() => {
        const data = [
          {
            id: 1,
            name: "leaf",
            leaf: true,
          },
          {
            id: 2,
            name: "zone",
          },
        ];

        data.forEach((item) => {
          this.selectedNodeId.push(item.id);
        });
        this.active(node, 100);
        resolve(data);
      }, 500);
    },

    active(node, time) {
      console.log(this.expandedNodeId, "ex");
      setTimeout(() => {
        let count = 0;
        node.childNodes &&
          node.childNodes.forEach((cell) => {
            console.log(this.selectedNodeId, "select");

            if (this.selectedNodeId.find((val) => val == cell.data.id)) {
              count += 1;
              cell.checked = true;
            }
          });
        if (count != 0 && node.childNodes.length != count) {
          node.checked = false;
          node.indeterminate = true;
        }
      }, time);
    },
    handleNodeClick(node) {
      this.selectedNodeId = node.id;
      // console.log(this.selectedNodeId, "node");
      this.scrollToSelectedNode();
    },
    scrollToSelectedNode() {
      const tree = this.$refs.tree;
      const selectedNode = tree.getNode(this.selectedNodeId);
      if (selectedNode) {
        selectedNode.scrollIntoView();
      }
    },
    saveNode() {
      localStorage.setItem("nodeId", this.selectedNodeId);
    },
  },
};
</script>



<style scoped>
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.box {
  width: 200px;
  height: 200px;
  background: pink;
  transform: translate();
  display: none;
}
>>> .el-transfer {
  padding: 20px;
}
>>> .el-transfer-panel {
  width: 16.417vw;
  height: 600px;
}
</style>